<template>
  <Maximize v-if="useGlobal.globalConfig.maximize" />
  <Tabs v-if="useGlobal.globalConfig.tabs" />
  <!-- <el-watermark
    style="width: 100%; height: 100%; overflow: hidden"
    :font="FontOptins"
    :content="getContent"
    :gap="[30, 30]"
    :rotate="-40"
  >
</el-watermark> -->
  <el-main>
    <router-view v-slot="{ Component, route }">
      <transition appear name="fade-transform" mode="out-in">
        <keep-alive :include="useKeepAliveName.keepAliveName">
          <component :is="Component" v-if="isRouterShow" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>
  </el-main>
</template>

<script setup lang="ts">
import { useGlobalStore, useKeepAliveStore } from "@/stores";
import { onUnmounted, provide, reactive, ref, watch } from "vue";
import Tabs from "@/layouts/components/Tabs/index.vue";
import Maximize from "./components/Maximize.vue";
// import { computed } from "vue";
defineOptions({
  name: "MainLayout"
});

const isRouterShow = ref(true);
const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val);
const useGlobal = useGlobalStore();
// const useUser = useUserStore();
const useKeepAliveName = useKeepAliveStore();
provide("refresh", refreshCurrentPage);
const FontOptins = reactive({
  color: "rgba(0, 0, 0, .03)",
  fontSize: 20
});
// const getContent = computed(() => [useUser.userInfo?.userName ?? "未登录", useUser.userInfo?.userCode] as string[]);

const stopWatch1 = watch(
  () => useGlobal.globalConfig.maximize,
  () => {
    const app = document.getElementById("app") as HTMLElement;
    if (useGlobal.globalConfig.maximize) app.classList.add("main-maximize");
    else app.classList.remove("main-maximize");
  },
  { immediate: true }
);

const stopWatch2 = watch(
  () => useGlobal.globalConfig.isDark,
  () => {
    FontOptins.color = useGlobal.globalConfig.isDark ? "rgba(255, 255, 255, .03)" : "rgba(0, 0, 0, .03)";
  },
  { immediate: true }
);

onUnmounted(() => {
  stopWatch1 && stopWatch1();
  stopWatch2 && stopWatch2();
});
</script>

<style scoped lang="scss">
:deep(.el-main) {
  width: 100%;
  height: 100%;
  .el-overlay {
    position: fixed !important;
  }
}
</style>
